<!--下载导入模板 上传短信模板-->
<template>
  <div class="wrap">
    <div class="btn-wrap">
      <el-button type="info" class="temp-download primary_btn">
        <a href="/static/template/robot_question_template-zh.xlsx?1" download>{{$t('config.channel.downloadImport')}}</a>
      </el-button>
      <!--饿了么上传组件-->
      <el-upload
        class="temp-upload"
        :action="uploadUrl"
        accept=".xls,.xlsx"
        name="upload"
        :data="uploadHeaders"
        :with-credentials="true"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :show-file-list="false">
        <el-button class="primary_btn" type="primary">{{$t('km.importName')}}</el-button>
      </el-upload>
    </div>
    <div class="import" v-show="importShow">
      <el-row :gutter="20">
        <el-col :span="4" class="label">{{$t('configLazyLoad.questionnaireConfig.importBatch')}}</el-col>
        <el-col :span="10"><el-input v-model.trim="importObj.batchNo" :disabled="true"></el-input></el-col>
        <el-col :span="10"><el-input v-model.trim="importObj.batchRemark" @click.enter="importExcel" :placeholder="$t('configLazyLoad.robotSeven.addBatchText')"></el-input></el-col>
      </el-row>
      <el-button class="primary_btn margin-t" @click.stop="importExcel" type="primary">{{$t('config.customer.import')}}</el-button>
    </div>
    <div class="instructions">
      {{$t('configLazyLoad.robotSeven.questionTempText')}}<br>
      {{$t('configLazyLoad.robotSeven.questionTempText1')}}<br>
      {{$t('configLazyLoad.robotSeven.questionTempText2')}}<br>
      {{$t('configLazyLoad.robotSeven.questionTempText3')}}<br>
      {{$t('configLazyLoad.robotSeven.questionTempText4')}}<br>
      {{$t('configLazyLoad.robotSeven.questionTempText5')}}<br>
    </div>
  </div>
</template>
<script>
  import {getDateNo} from '@/utils/m7Utils'
  export default {
    name: 'robotQuestionTemplate',
    data () {
      return {
        uploadUrl: '/kmUpload',
        uploadHeaders: {
          type: 'undefined',
          module: '',
          sessionId: this.$store.state.session.sessionId
        },
        importObj: {
          batchNo: '',
          batchRemark: '',
          heads: ['name', 'likeness', 'answer', 'type']
        },
        importShow: false
      }
    },
    props: {
      isShow: Boolean
    },
    watch: {
      isShow: function () {
        this.importShow = false
        this.importObj.batchRemark = ''
      }
    },
    methods: {
//        上传前 配置上传参数
      beforeUpload (file) {
        this.uploadHeaders.key = 'file'
        this.uploadHeaders.name = file.name
        let arr = file.name.split('.')
        let arrType = ['xls', 'xlsx']
        if (arrType.indexOf(arr[arr.length - 1]) !== -1) {
          return true
        } else {
          this.$message.error(this.$t('configLazyLoad.robotSeven.errorMessage1'))
          return false
        }
      },
//      上传成功
      handleSuccess (response, file, fileList) {
        if (response.success) {
          let fileName = response.filePath.substring(response.filePath.lastIndexOf('/') + 1)
          let trueName = response.fileName
          this.getXlsHeads(trueName, fileName)
        } else {
          this.$message.error(this.$t('configLazyLoad.robotSeven.errorMessage2'))
        }
      },
      handleError () {
        this.$message.error(this.$t('configLazyLoad.robotSeven.errorMessage2'))
      },
      getXlsHeads (trueName, fileName) {
        this.$store.dispatch('getRobotXlsHeads', {trueName, fileName}).then((resp) => {
          if (resp.success) {
            this.importShow = true
            this.importObj.batchNo = getDateNo()
            this.importObj.batchRemark = ''
            this.importObj.trueName = trueName
            this.importObj.fileName = fileName
            this.importObj.xlsHeads = JSON.stringify(resp.heads)
          } else {
            this.$message.error(resp.message)
          }
        })
      },
      importExcel () {
        this.$store.dispatch('importRobotQuestion', this.importObj).then((resp) => {
          if (resp.success) {
            this.$message.success(this.$t('configLazyLoad.robotSeven.finishMessage'))
            this.importShow = false
            this.$emit('close')
          }
        })
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wrap
    padding 20px
    .btn-wrap
      padding-bottom 10px
      overflow hidden
      .temp-download
        float left
        a
          color #fff
      .temp-upload
        float left
        display inline-block
        margin-left 20px
        .temp-upload-btn
          font-size 12px
          padding 8px 15px
    .instructions
      clear both
      font-size 12px
      line-height 22px
      color $c-prompt
  .label
    line-height 30px
    text-align right
  .margin-t
    margin-top 20px
</style>
